<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>疯狂的按键</title>
        <style>
			/*基本样式*/
			body, ul {
				margin: 0;
				padding: 0;
			}

			ul, li {
				list-style: none;
			}

			h1 {
				background: #eee;
				width: 100%;
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 20px;
				margin: 60px 0;
			}

			h1:nth-child(1) {
				margin-top: 20px;
			}

			ul {
				width: 77%;
				margin: 0 auto;
				height: 150px;
			}

			li {
				width: auto;
				height: auto;
				float: left;
				margin-right: 50px;				
			}

			ul li:last-child {
				margin-right: 0;
			}

			/*设置过渡效果*/
			.share1 img,.share2 img{
				transition: all 0.8s ease-in-out;
			}

			/*设置变形*/
			.share1 img:hover {
				transform: scale(1.5) rotate(360deg) ;
			}

			.share2 img:hover {
				transform: rotate(-360deg) scale(0.7);
			}
        </style>
    </head>
    <body>
    	<h1>顺时针旋转360°放大1.2倍</h1>
    	<ul class="share1">
    		<li><a href="#"><img src="images/share1.png" alt=""></a></li>
    		<li><a href="#"><img src="images/share2.png" alt=""></a></li>
    		<li><a href="#"><img src="images/share3.png" alt=""></a></li>
    		<li><a href="#"><img src="images/share4.png" alt=""></a></li>
    		<li><a href="#"><img src="images/share5.png" alt=""></a></li>
    		<li><a href="#"><img src="images/share6.png" alt=""></a></li>
    	</ul>
    	<h1>逆时针旋转360°缩小0.7倍</h1>
    	<ul class="share2">
    		<li><a href="#"><img src="images/share7.png" alt=""></a></li>
    		<li><a href="#"><img src="images/share8.png" alt=""></a></li>
    		<li><a href="#"><img src="images/share9.png" alt=""></a></li>
    		<li><a href="#"><img src="images/share10.png" alt=""></a></li>
    		<li><a href="#"><img src="images/share11.png" alt=""></a></li>
    		<li><a href="#"><img src="images/share12.png" alt=""></a></li>
    	</ul>
    </body>
</html>